<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>JSX的注意</title>
    <!--引入react的核心库-->
    <script src="../script/react.development.js"></script>
    <!--引入react的DOM库-->
    <script src="../script/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="../script/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">  
        /*
        *   JSX的注意事项
        *       1. JSX不是字符串，不要加引号
        *       2. JSX中html标签应该小写，React组件应该大写开头
        *       3. JSX中有且只有一个根标签
        *       4. JSX的标签必须正确结束（自结束标签必须写/）
        *       5. 在JSX中可以使用{}嵌入表达式
        *              - 有值的语句的就是表达式
        *       6. 如果表达式是空值、布尔值、undefined，将不会显示
        *       7. 在JSX中，属性可以直接在标签中设置
        *           注意：
        *               class需要使用className代替
        *               style中必须使用对象设置
        *                   style={{background:'red'}}
        *
        * */

        function fn() {
            return 'hello';
        }

        const name = '孙悟空';

        const div = <div
            id="box"

            onClick={() => {
                alert('哈哈')
            }} className="box1"

            style={{ backgroundColor: "yellowgreen", border: '10px red solid' }}
        >
            我是一个div
            <ul>
                <li>列表项</li>
            </ul>

            <input type="text" />

            <div>
                {name} <br />
                {1 + 1} <br />
                {fn()} <br />
                {NaN} <br />
            </div>
        </div>;

        // alert(div);


        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(div);

    </script>
</body>

</html>